<template>
	<div id="index" ref="appRef">
		<nav-bar></nav-bar>
        <router-view></router-view>
	</div>
</template>

<script>
import navBar from "./components/navBar.vue";


export default {
	name: "App",
	components: {
		navBar
	},
	data() {
		return {
			scale: {
				width: "1",
				height: "1",
			},
			baseWidth: 1920,
			baseHeight: 1080,
			currentRate: 1,
		};
	},
	computed: {
		baseProportion() {
			return parseFloat((this.baseWidth / this.baseHeight).toFixed(3));
		},
	},
	mounted() {
		this.calcRate();
		window.addEventListener("resize", this.resize);
	},
	unmounted() {
		window.removeEventListener("resize", this.resize);
	},
	methods: {
		calcRate() {
			if (this.$refs.appRef) {
				this.currentRate = parseFloat(
					(window.innerWidth / window.innerHeight).toFixed(3)
				);
				if (this.currentRate > this.baseProportion) {
					// 表示更宽
					this.scale.width = (
						(window.innerHeight * this.baseProportion) /
						this.baseWidth
					).toFixed(3);
					this.scale.height = (
						window.innerHeight / this.baseHeight
					).toFixed(3);
					this.$refs.appRef.style.transform = `scale(${this.scale.width}, ${this.scale.height}) translate(-50%, -50%)`;
				} else if (this.currentRate < this.baseProportion) {
					// 表示更高
					this.scale.height = (
						window.innerWidth /
						this.baseProportion /
						this.baseHeight
					).toFixed(3);
					this.scale.width = (
						window.innerWidth / this.baseWidth
					).toFixed(3);
					this.$refs.appRef.style.transform = `scale(${this.scale.width}, ${this.scale.height}) translate(-50%, -50%)`;
				}
			}
		},
		//
		resize() {
			window.clearTimeout(t);
			var t = window.setTimeout(() => {
				this.calcRate();
			}, 200);
		},
		// 窗口大小监听
		windowDraw() {},
		// 卸载窗口大小监听
		unWindowDraw() {},
	},
};
</script>

<style>
*{
	margin:0;
	padding: 0;
}
#index {
	background-color: #040d2e;
	color: #d3d6dd;
	width: 1920px;
	height: 1080px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transform-origin: left top;
}
</style>
